<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			#t1{
				font-family: "arial narrow";
				font-size: 40px;
				color: aqua;
			}
			.south{color:red;}
			
			#p1{border:50px groove green;}
			.p2{text-decoration:line-through; border: 50px solid black;}
			p{
				width: 40%;
				font-size:20px;
				color:red;
				border: 15px dotted yellow;
			}
		</style>
	</head>
	<body>
		
		<h2 id="t1">常见水果有</h2>
		<ul>
			<li>苹果</li>
			<li>梨子</li>
			<li>桃子</li>
			<li>猕猴桃</li>
			<li class="south">菠萝</li>
			<li class="south">龙眼</li>
			<li class="south">香蕉</li>
		</ul>
		<h2>你喜欢哪个？</h2>
		<p id="p1" class="p2">
			通过 @keyframes 规则，您能够创建动画。

创建动画的原理是，将一套 CSS 样式逐渐变化为另一套样式。

在动画过程中，您能够多次改变这套 CSS 样式。

以百分比来规定改变发生的时间，或者通过关键词 "from" 和 "to"，等价于 0% 和 100%。

0% 是动画的开始时间，100% 动画的结束时间。

为了获得最佳的浏览器支持，您应该始终定义 0% 和 100% 选择器。

注释：请使用动画属性来控制动画的外观，同时将动画与选择器绑定。
		</p>
	</body>
</html>
